.material-management {
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 20px 0;
  .tab-selector {
    display: flex;
    justify-content: center;
    .tab-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 105px;
      height: 30px;
      border: 1px solid #3A4E74;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
    }
    .tab-item:first-child{
      border-radius: 4px 0 0 4px;
      border-right: none;
    }
    .tab-item:last-child{
      border-radius: 0 4px 4px 0;
      border-left: none;
    }
    .isActive{
      color: rgba(255,255,255,1);
      border: 1px solid #43c3f5 !important;
      background: linear-gradient(to bottom, rgba(67,195,245, 0) 20%, rgba(67,195,245, 1));
    }
    .unActive{
      border: 1px solid #3A4E74 !important;
      background: rgba(5, 18, 34, 0.20);
      color: rgba(255,255,255,0.9);
    }
  }
  // 统计数据区域
  .stats-area {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    .stat-item {
      width: calc(100% / 3);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      .stat-label {
        font-family: SourceHanSansSC, sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        text-align: center;
        font-style: normal;
        margin-bottom: 8px;
      }

      .stat-value-container {
        display: flex;
        align-items: baseline;
        justify-content: center;
        height: 28px;
        .stat-value {
          font-family: DINAlternate, sans-serif;
          font-weight: bold;
          font-size: 24px;
          line-height: 28px;
          letter-spacing: 0.86px;
          text-align: left;
          font-style: normal;
          transition: all 0.3s ease;
          // 渐变文字效果
          &.gradient-text {
            background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
          }
        }

        .stat-unit {
          // SourceHanSansSC Normal, 16px, #FFFFFF, 行高22px, 居中对齐
          font-family: SourceHanSansSC, sans-serif;
          font-weight: 400;
          font-size: 16px;
          line-height: 22px;
          text-align: center;
          font-style: normal;
          margin-left: 4px;
          align-self: flex-end;
          margin-bottom: 3px; // 对齐调整
        }
      }
    }
  }

  // 表格区域
  .table-area {
    width: 100%;
    padding: 20px 20px 0;
    box-sizing: border-box;
    // 表头
    .table-header {
      width: 100%;
      display: flex;
      align-items: center;
      height: 40px;
      .header-cell {
        width: calc(100% / 3);
        // 字体思源黑体 Medium, 16px, #56A5FF, 行高16px, 居中对齐
        font-family: SourceHanSansSC, sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 16px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
    // 表格主体
    .table-body {
      width: 100%;
      height: 90px;
      overflow-y: auto;
      .table-row:nth-child(2n){
        background: rgba(16,85,163,0.18);
      }
      .table-row {
        display: flex;
        align-items: center;
        // Frame 26备份 17: 460px 40px, rgba(16,85,163,0.18)
        width: 100%;
        height: 40px;
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover {
          background: rgba(16, 85, 163, 0.35) !important;
          transform: translateX(2px);

          .table-cell {
            color: #FFFFFF !important;
            filter: brightness(1.1);
          }
        }

        &:active {
          transform: translateX(0);
        }

        .table-cell {
          width: calc(100% / 3);
          // 字体思源黑体 Medium, 16px, #56A5FF, 行高16px, 居中对齐
          font-family: SourceHanSansSC, sans-serif;
          font-weight: 500;
          font-size: 14px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }

  // 悬停效果
  &:hover {
    transform: translateY(-2px);

    .warehouse-tab.active {
      filter: brightness(1.1);
    }

    .stat-value.gradient-text {
      filter: brightness(1.2);
    }
  }

  &:active {
    transform: translateY(0);
  }

  // 主题样式
  &.dark {
    // 默认深色主题
  }

  &.light {
    .warehouse-tab {
      &.active .tab-text {
        color: rgba(0, 0, 0, 0.9) !important;
      }

      &.inactive {
        background: rgba(240, 240, 240, 0.9) !important;
        border-color: #B0B0B0 !important;

        .tab-text {
          color: rgba(0, 0, 0, 0.7) !important;
        }

        &:hover {
          background: rgba(220, 220, 220, 0.9) !important;
          border-color: #909090 !important;

          .tab-text {
            color: rgba(0, 0, 0, 0.9) !important;
          }
        }
      }
    }

    .stat-label {
      color: rgba(0, 0, 0, 0.8) !important;
    }

    .stat-value {
      color: #1565C0 !important;

      &.gradient-text {
        background: linear-gradient(90deg, #1565C0 0%, #42A5F5 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }

    .stat-unit {
      color: rgba(0, 0, 0, 0.8) !important;
    }

    .header-cell {
      color: #1565C0 !important;
    }

    .table-cell {
      color: rgba(0, 0, 0, 0.8) !important;
    }

    .table-row {
      background: rgba(25, 118, 210, 0.1) !important;

      &:hover {
        background: rgba(25, 118, 210, 0.2) !important;

        .table-cell {
          color: rgba(0, 0, 0, 1) !important;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .warehouse-tabs {
      left: 60px;

      .warehouse-tab {
        &.first {
          width: 88px;
          height: 32px;
        }

        &:not(.first) {
          width: 90px;
          height: 32px;
        }

        .tab-text {
          font-size: 14px;
        }
      }
    }

    .stats-area {
      top: 45px;

      .stat-item {
        width: 120px;
        height: 50px;

        .stat-label {
          font-size: 14px;
          width: 120px;
        }

        .stat-value-container {
          .stat-value {
            font-size: 20px;
          }

          .stat-unit {
            font-size: 14px;
          }
        }
      }
    }

    .table-area {
      left: 20px;
      top: 120px;
      width: 380px;

      .table-header .header-cell {
        font-size: 14px;

        &.name-column {
          width: 80px;
        }

        &.quantity-column {
          width: 120px;
        }

        &.expiring-column {
          width: 140px;
        }
      }

      .table-body .table-row {
        width: 380px;
        height: 36px;

        .table-cell {
          font-size: 12px;

          &.name-column {
            width: 120px;
          }

          &.quantity-column {
            width: 120px;
          }

          &.expiring-column {
            width: 120px;
          }
        }
      }
    }
  }

  @media (max-width: 480px) {
    .warehouse-tabs {
      left: 40px;

      .warehouse-tab {
        &.first {
          width: 75px;
          height: 28px;
        }

        &:not(.first) {
          width: 75px;
          height: 28px;
        }

        .tab-text {
          font-size: 12px;
        }
      }
    }

    .stats-area {
      flex-direction: column;
      align-items: center;
      top: 40px;

      .stat-item {
        width: 100px;
        height: 45px;
        margin-bottom: 8px;

        .stat-label {
          font-size: 12px;
          width: 100px;
        }

        .stat-value-container {
          .stat-value {
            font-size: 18px;
          }

          .stat-unit {
            font-size: 12px;
          }
        }
      }
    }

    .table-area {
      left: 10px;
      top: 180px;
      width: 320px;

      .table-header .header-cell {
        font-size: 12px;

        &.name-column {
          width: 100px;
        }

        &.quantity-column {
          width: 80px;
        }

        &.expiring-column {
          width: 100px;
        }
      }

      .table-body .table-row {
        width: 320px;
        height: 32px;

        .table-cell {
          font-size: 11px;

          &.name-column {
            width: 100px;
          }

          &.quantity-column {
            width: 80px;
          }

          &.expiring-column {
            width: 100px;
          }
        }
      }
    }
  }

  // 焦点可访问性
  &:focus {
    outline: 2px solid rgba(86, 165, 255, 0.5);
    outline-offset: 2px;
  }

  .warehouse-tab:focus,
  .table-row:focus {
    outline: 2px solid rgba(86, 165, 255, 0.8);
    outline-offset: 2px;
  }

  // 高对比度模式
  @media (prefers-contrast: high) {
    .warehouse-tab {
      border-width: 2px !important;

      .tab-text {
        font-weight: bold !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
      }

      &.inactive {
        background: rgba(5, 18, 34, 0.8) !important;
      }
    }

    .stat-label,
    .stat-value,
    .stat-unit,
    .header-cell,
    .table-cell {
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
      font-weight: bold !important;
    }

    .table-row {
      border: 1px solid rgba(16, 85, 163, 0.5) !important;
    }
  }

  // 减少动画
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
      transform: none !important;
      animation: none !important;
    }

    &:hover {
      transform: none !important;
    }

    .warehouse-tab:hover,
    .table-row:hover {
      transform: none !important;
    }
  }

  // 数据状态
  &.loading {
    opacity: 0.7;
    pointer-events: none;

    .stat-value {
      animation: pulse 1.5s ease-in-out infinite;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 10px;
      width: 16px;
      height: 16px;
      margin-top: -8px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #56A5FF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 10;
    }
  }

  &.warning {
    .stat-value {
      color: #FF9800 !important;

      &.gradient-text {
        background: linear-gradient(90deg, #FF8F00 0%, #FFB74D 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }

    .table-row {
      background: rgba(255, 152, 0, 0.18) !important;
    }
  }

  &.danger {
    .stat-value {
      color: #F44336 !important;
      animation: dangerPulse 1s ease-in-out infinite;

      &.gradient-text {
        background: linear-gradient(90deg, #D32F2F 0%, #F44336 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }

    .table-row {
      background: rgba(244, 67, 54, 0.18) !important;
    }

    .warehouse-tab.active {
      animation: shake 0.5s ease-in-out infinite;
    }
  }

  &.success {
    .stat-value {
      color: #4CAF50 !important;

      &.gradient-text {
        background: linear-gradient(90deg, #2E7D32 0%, #4CAF50 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }

    .table-row {
      background: rgba(76, 175, 80, 0.18) !important;
    }
  }

  &.disabled {
    pointer-events: none;
    opacity: 0.5;

    * {
      filter: grayscale(1);
    }
  }

  // 动画关键帧
  @keyframes pulse {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes dangerPulse {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.1);
      filter: brightness(1.5);
    }
  }

  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-2px);
    }
    75% {
      transform: translateX(2px);
    }
  }

  // 特殊效果
  &.enhanced {
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, transparent, rgba(86, 165, 255, 0.3), transparent);
      border-radius: 6px;
      z-index: -1;
      animation: borderFlow 3s linear infinite;
    }

    .stat-value {
      animation: dataGlow 2s ease-in-out infinite;
    }
  }

  @keyframes borderFlow {
    0% {
      transform: rotate(0deg);
      opacity: 0.5;
    }
    100% {
      transform: rotate(360deg);
      opacity: 0.5;
    }
  }

  @keyframes dataGlow {
    0%, 100% {
      text-shadow: 0 0 5px rgba(86, 165, 255, 0.5);
    }
    50% {
      text-shadow: 0 0 15px rgba(86, 165, 255, 0.8), 0 0 25px rgba(86, 165, 255, 0.6);
    }
  }

  // 错误状态
  &.error {
    .table-row {
      background: rgba(255, 87, 34, 0.8) !important;
    }

    &::after {
      content: '数据异常';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 0, 0, 0.9);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      z-index: 15;
    }
  }

  // 更新状态
  &.updating {
    .stat-value {
      animation: updateAnimation 0.8s ease-in-out;
    }

    .table-row {
      animation: rowUpdate 1s ease-in-out;
    }
  }

  @keyframes updateAnimation {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.7;
      filter: brightness(1.3);
    }
  }

  @keyframes rowUpdate {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
      filter: brightness(1.2);
    }
  }

  // 库存状态
  &.low-stock {
    .stat-value {
      color: #FF6B6B !important;
      animation: lowStockPulse 2s ease-in-out infinite;
    }

    .table-row:first-child {
      background: rgba(255, 107, 107, 0.25) !important;
    }
  }

  @keyframes lowStockPulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
      transform: scale(1.05);
    }
  }

  // 即将过期状态
  &.expiring-soon {
    .table-cell.expiring-column {
      color: #FFB74D !important;
      animation: expiringBlink 3s ease-in-out infinite;
    }
  }

  @keyframes expiringBlink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
      filter: brightness(1.3);
    }
  }
}
